<template>
  <div class="br-container">
    <vue-particles color="#c0c4cc" :particleOpacity="0.7" :particlesNumber="100" shapeType="circle" :particleSize="4"
      linesColor="#afb3ba" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="2"
      :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" class="prettify">
    </vue-particles>
    <div class="content">
      <div class="left"></div>
      <div class="right">
        <div class="login-title">
          <span>BR数据平台</span>
        </div>
        <div class="login-form">
          <div class="text">
            <i class="el-icon-user"></i>
            <input class="inputvalue" type="text" placeholder="账号" v-model="loginUserForm.username" />
          </div>
          <div class="text" style="margin-top: 40px;">
            <i class="el-icon-lock"></i>
            <input class="inputvalue" type="password" placeholder="密码" v-model="loginUserForm.password" />
          </div>
          <button class="btns" @click="loginUser" v-if="!loadingButton">{{loadingText}}</button>
          <button class="btns" @click="loginUser" v-else><i class="el-icon-loading"></i></button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import JSEncrypt from 'jsencrypt';
  import {
    login,
    getPublicKey,
  } from '@/api/auth/auth'
  import {
    setToken
  } from '@/common/utils/user.js'
  export default {
    components: {},
    data() {
      return {
        loginUserForm: {
          username: 'admin',
          password: 'admin'
        },
        loadingText: "登录",
        loadingButton: false,
        isShow: false,
        publicKey: ""
      }
    },
    computed: {},
    methods: {
      loginUser() {
        const encrypt = new JSEncrypt();
        encrypt.setPublicKey(this.publicKey);
        let parmas = {
          username: this.loginUserForm.username,
          password: encrypt.encrypt(this.loginUserForm.password)
        }
        this.loadingButton = true;
        login(parmas).then((res) => {
          this.loadingButton = false;
          if (res.data.status == 200) {
            setToken(res.data.data);
            this.$router.push({
              path: '/about/home'
            });
          }
        });
      },
    },
    created() {},
    mounted() {
      getPublicKey().then((res) => {
        this.publicKey = res.data.data;
      });
    }
  };
</script>

<style scoped lang="less">
  .prettify {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .content {
    width: 720px;
    height: 380px;
    position: relative;
    margin: auto;
    flex-shrink: 0;
    margin: 0px;
    box-shadow: 10px 10px 20px 0 rgba(0, 63, 163, .3);
    background-color: #FFFFFF;
  }

  .left {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 270px;
    background-color: rgba(0, 84, 230, 0.5);
    background-image: url(../../assets/background2.png);
    background-repeat: no-repeat;
    background-size: 90% 90%;
    background-position: 50% 50%;
    -webkit-clip-Path: ellipse(100px 100px at 0% 50%);
    clip-Path: ellipse(270px 380px at 40% 50%);
  }

  .right {
    width: 270px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
  }

  .login-form {
    width: 190px;
    height: 240px;
    padding: 0 40px;
  }

  .login-title {
    position: relative;
    width: 100%;
    height: 130px;
    line-height: 130px;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    color: #606266;
  }

  .login-form .text {
    position: relative;
    width: 100%;
    height: 25px;
    line-height: 25px;
    border-bottom: 1px solid #e8eaed;
  }

  .login-form .text i {
    color: #3685F2;
    font-size: 16px;
    vertical-align: middle;
  }

  .login-form .text .inputvalue {
    position: absolute;
    left: 25px;
    top: 0px;
    width: 145px;
    line-height: 25px;
    border: none;
    outline: none;
    background-color: #FFFFFF;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: #3d4d66;
  }

  .login-form .btns {
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-top: 50px;
    border: none;
    outline: none;
    background-image: linear-gradient(to right, #3685f2, rgba(93, 36, 202, 0.44));
    color: #FFFFFF;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
  }

  .login-form .btns:hover {
    background-color: #409eff;
    transition: background-color .1s linear;
  }
</style>
